const oBox = document.getElementById('box')
const oBall = document.getElementById('ball')
const oSlider = document.getElementById('slider')
const oBtn = document.getElementById('btn')
const oBrick = document.getElementById('brick')
const brickArr = oBrick.getElementsByTagName('div')
const grade = document.getElementById('grade')
const rank = grade.children[1]
const scoreBox = grade.children[3]
let isRunning = false
let score = 0
let timer = null
let speedX = rand(3,12);
let speedY = -rand(3,12);

init()
function init(){
  //生成砖块
  createBrick(72)
  //随机生产小球的位置
  reset()
  //计算游戏难度
  computedDiff()
}

function createBrick(n){
  for (let index = 0; index < n; index++) {
    const node = document.createElement('div')
    node.style.backgroundColor = color()
    oBrick.appendChild(node)
  }

  for (let index = 0; index < brickArr.length; index++) {
    const element = brickArr[index];
    element.style.left = element.offsetLeft + 'px'
    element.style.top = element.offsetTop + 'px'
  }

  for (let index = 0; index < brickArr.length; index++) {
    const element = brickArr[index];
    element.style.position = 'absolute'
  }

}


function reset(){
  const beginGo = rand(100,500)
  oBall.style.left = beginGo + 40 +'px'
  oSlider.style.left = beginGo +'px'
}


function computedDiff(){
 const num =speedX-speedY;
 switch(num){
  case 6:case 7:case 8:
  rank.innerHTML="简单";
  break;
  case 9:case 10:case 11:
  rank.innerHTML="一般";
  break;
  case 12:case 13:case 14:
  rank.innerHTML="中等";
  break;
  case 15:case 16:case 17:
  rank.innerHTML="难"
  break;
  case 18:case 19:case 20:
  rank.innerHTML="很难"
  slider.style.width = 100+"px";
  break;
  case 21:case 22:
  rank.innerHTML="特别难"
  slider.style.width = 80+"px";
  break;
  case 23:case 24:
  rank.innerHTML="哭了"
  slider.style.width = 60+"px";
  break;
 }
}

oBtn.addEventListener('click',function(){
  this.style.display = 'none'
  isRunning = true
  clearInterval(timer)
  timer = setInterval(() => {
    const ballLeft = oBall.offsetLeft
    const ballTop = oBall.offsetTop
    
    let nextLeft = ballLeft + speedX
    let nextTop = ballTop + speedY 

    //边界判断
    if(nextLeft <=0 || nextLeft >= oBox.offsetWidth - oBall.offsetWidth - 10){
      speedX = -speedX
    }

    if(nextTop <= 0){
      speedY = -speedY
    }

    //当小球触碰到下边界时，提示“游戏失败”，重新刷新页面
   if( nextTop > oBox.offsetHeight - oBall.offsetHeight){
      location.reload();
      clearInterval(timer)
      alert("You were dead！")
    }

    oBall.style.left = nextLeft + 'px'
    oBall.style.top = nextTop + 'px'


    if(knock(oBall,oSlider)){
      speedY = -speedY
    }
    for (let index = 0; index < brickArr.length; index++) {
      const element = brickArr[index];
      if(knock(element,oBall)){
        speedY = -speedY
        oBrick.removeChild(element)
        score++
        scoreBox.innerHTML = score
        break;
      }
    }

    if(brickArr.length == 0) {
      location.reload();
      clearInterval(timer)
      alert("You win!")
    }
  },20)
})


document.addEventListener('keydown',function(e){
  const event = e || window.event
  const code = event.keyCode || event.which
  const offsetX = oSlider.offsetLeft
  if(isRunning){
    switch (code) {
      case 37:
        if(offsetX <=0){
          oSlider.style.left = 0
        }
        oSlider.style.left = offsetX * 4 / 5 + 'px'
        break;
      case 39:
        if(offsetX >= oBox.offsetWidth - oSlider.offsetWidth -10 ){
          oSlider.style.left = oBox.offsetWidth - oSlider.offsetWidth + 'px'
          break
        }
        oSlider.style.left = (oBox.offsetWidth - oSlider.offsetWidth-offsetX) / 5 + offsetX + 'px'
        break;
      default:
        break;
    }
  }
})
